<template>
  <div class="appContainer">
    <div class="filterContainer">
      <!-- 上方搜索框模块 -->
      <div class="input-btn">
        <!-- 部门 -->
        <div class="fun-btn">
          <span>部门：</span>
          <el-input placeholder="点击选择" style="width: 200px;" class="filter-item"/>
        </div>
        <!-- 等级 -->
        <div class="fun-btn">
          <span>等级：</span>
          <el-select
            v-model="gradeValue"
            placeholder="全部"
            clearable
            class="filter-item"
            style="width: 200px"
          >
            <el-option
              v-for="item in calendarTypeOptions"
              :key="item.key"
              :label="item.display_name+'('+item.key+')'"
              :value="item.key"
            />
          </el-select>
        </div>
        <!-- 状态 -->
        <div class="fun-btn">
          <span>状态：</span>
          <el-select
            placeholder="全部"
            clearable
            class="filter-item"
            style="width: 200px"
            v-model="staticValue"
          >
            <el-option
              v-for="item in stateOptions"
              :key="item.key"
              :label="item.display_name+'('+item.key+')'"
              :value="item.key"
            />
          </el-select>
        </div>
        <!-- 是否激活 -->
        <div class="fun-btn">
          <span>是否激活：</span>
          <el-select
            placeholder="全部"
            clearable
            class="filter-item"
            style="width: 200px"
            v-model="activeValue"
          >
            <el-option
              v-for="item in activationOptions"
              :key="item.key"
              :label="item.display_name+'('+item.key+')'"
              :value="item.key"
            />
          </el-select>
        </div>
        <!-- 搜索 -->
        <div class="fun-btn">
          <span>搜索：</span>
          <el-input placeholder="输入关键字" style="width: 200px;" class="filter-item"/>
          <el-button type="primary" icon="el-icon-search" class="search-bth">搜索</el-button>
        </div>
      </div>

      <!-- 新增，批量激活模块 -->
      <div class="add-btn">
        <el-button type="primary" icon="el-icon-search" class="search-bth">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" class="search-bth">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" class="search-bth">搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script>
const calendarTypeOptions = [
  { key: "CN", display_name: "China" },
  { key: "US", display_name: "USA" },
  { key: "JP", display_name: "Japan" },
  { key: "EU", display_name: "Eurozone" }
];
const stateOptions = [
  { key: "CN", display_name: "1" },
  { key: "US", display_name: "2" },
  { key: "JP", display_name: "3" },
  { key: "EU", display_name: "4" }
];
const activationOptions = [
  { key: "CN", display_name: "001" },
  { key: "US", display_name: "002" },
  { key: "JP", display_name: "003" },
  { key: "EU", display_name: "004" }
];

export default {
  data() {
    return {
      // 等级的数据
      calendarTypeOptions,
      // 状态的数据
      stateOptions,
      //是否激活的数据
      activationOptions,
      // 等级下拉选择框显示的内容
      gradeValue: "",
      //状态下拉选择框显示的内容
      staticValue: "",
      // 激活下拉选择框显示的内容
      activeValue: ""
    };
  }
};
</script>


<style lang="scss" scoped>
.fun-btn {
  float: left;
  margin-right: 24px;
  font-size: 14px;
  margin-bottom: 14px;
  .search-bth{
    margin-left: 24px;
    background: #009688;
    width: 65px;
    font-size: 14px;
    text-indent: -7px;
  }
}
</style>

